<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="./img/yyy.png" />
  <title>随机数</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #app {
      height: 100vh;
      width: 100vw;
    }

    .title {
      padding: 10vh 0 10vh 0;
      text-align: center;
      font-size: 5vw;
      font-weight: 500;
    }

    .numberBox {
      width: 100vw;
      padding: 0 15vw 0 15vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }

    .number {
      box-sizing: border-box;
      border: 1px solid #ff9494;
      width: 30vw;
      height: 10vw;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 1vw;
    }

    .number:nth-child(-n+1) {
      border-color: skyblue;
    }

    .number input {
      width: 100%;
      height: 100%;
      outline: none;
      border: none;
      border-radius: 1vw;
      text-align: center;
      font-size: 3vw;
    }

    .operationBtn {
      margin: 10vh auto 0 auto;
      width: 30vw;
      height: 10vw;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 1vw;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3vw;
    }

    .resultList {
      display: flex;
      flex-wrap: wrap;
      padding: 0 5vw 0 5vw;
      margin-top: 5vh;
    }

    .resultNum {
      flex: 0 0 calc((90vw - 18vw) / 10);
      text-align: center;
      color: #333;
      margin-left: 2vw;
    }

    .resultNum:nth-child(10n + 1) {
      margin-left: 0;
    }

    .resultNum.active {
      margin-top: 1vw;
    }
  </style>
</head>

<body>

  <div id="app">
    <div class="title">生成随机数</div>

    <div class="numberBox">
      <div class="number" v-for="item in inputList">
        <input type="text" :placeholder="item.tip" v-model="item.value" />
      </div>
    </div>

    <div class="operationBtn" @click="getRandom()">生成</div>


    <div v-if="resultList.length>0">
      <div class="resultList" v-for="(item,index) in resultList">
        <div :class="[index2<10?'resultNum':'resultNum active']" v-for="(item2,index2) in item">{{item2}}</div>
      </div>
    </div>

  </div>

  <script src="./js/ajax.js"></script>
  <script src="./js/vue.min.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        resultList: [],
        inputList: [{
            tip: "请输入生成个数",
            value: "",
          },
          {
            tip: "请输入最大值",
            value: ""
          }
        ]
      },
      methods: {
        getRandom() {
          this.resultList = [];
          if (isNaN(this.inputList[0].value) || isNaN(this.inputList[0].value)) {
            this.inputList[0].value = "";
            this.inputList[1].value = "";
            alert("请输入数字");
            return
          }
          if (parseInt(this.inputList[0].value) > parseInt(this.inputList[1].value)) {
            this.inputList[0].value = "";
            this.inputList[1].value = "";
            alert("个数无法大于最大值嗷")
            return
          }

          let _this = this;
          let testArr = [];
          for (let i = 0; i < parseInt(_this.inputList[0].value); i++) {
            function test() {
              let num = parseInt(Math.random() * parseInt(_this.inputList[1].value) + 1);
              if (testArr.length > 0 && testArr.includes(num)) {
                test();
              } else {
                testArr.push(num)
              }
            }
            test();
          }
          let result = new Set(testArr);
          this.inputList[0].value = "";
          this.inputList[1].value = "";
          if (result.size == testArr.length) {
            this.resultList.push(testArr)
          } else {
            alert("生成结果有重复数据，无法使用")
          }
        }
      }
    })
  </script>
</body>

</html>